<template>
  <Row>
    <Col span="16" offset="3">
    <div style="background:#eee;padding: 20px">
      <Card :bordered="false">
        <p slot="title">添加一个用户账号</p>
        <Form ref="formItem" :model="formItem" :label-width="120" :rules="ruleValidate">
          <FormItem label="用户账号" prop="account">
            <Input v-model="formItem.note" type="text" placeholder="请输入新用户账号"></Input>
          </FormItem>
          <FormItem label="密码" prop="pass">
            <Input v-model="formItem.pass" type="password" placeholder="请输入新用户密码"></Input>
          </FormItem>
          <FormItem label="邮箱" prop="email">
            <Input v-model="formItem.newuser" type="text" placeholder="请输入新用户邮箱"></Input>
          </FormItem>
          <FormItem label="电话" prop="tel">
            <Input v-model="formItem.newuser" type="text" placeholder="请输入新用户电话"></Input>
          </FormItem>
          <FormItem>
            <Button type="success" @click="handleSubmit('formItem')">添加</Button>
          </FormItem>
        </Form>
      </Card>
    </div>
    </Col>
  </Row>

</template>

<script>
  export default {
    name: 'Addstore',
    data () {
      return {
        formItem: {
          account: '',
          pass: '',
          tel: '',
          email: ''
        },
        ruleValidate: {
          account: [
            {required: true, message: '请输入新用户账号', trigger: 'blur'}
          ],
          pass: [
            {required: true, message: '请输入新用户密码', trigger: 'blur'}
          ],
          tel: [
            {required: true, message: '请输入新用户电话', trigger: 'change'}
          ],
          email: [
            {required: true, message: '请输入新用户邮箱', trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log(this.formItem)
          } else {
            this.$Message.error('Fail!')
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
